/* 
1 组件挂载完毕后发送请求获取数据
  1 获取城市的id - 从redux获取城市名称
  2 把id 和 start 和 end 发送到后台即可

2 将房源项封装成一个组件

3 使用原生的标签来实现列表滚动

4 使用 可视区域渲染组件 List 来实现列表滚动

5 当用户 选择了筛选条件之后 发送请求 
  1 筛选组件 点击确定后 将 筛选对象 传递给 父组件 (通过事件的方式 )

6 分页
  1 可以触发分页的事件 滚动条触底事件(微信小程序 onReachBottom )
  2 滚动事件 onScroll  有一些参数  = > 类似 onReachBottom
  3 分页的逻辑
    1 先知道还有下一页  this.Params.start 和 res.count 比较即可 
      start >= count  表示没有下一页了 告诉用户
    2 有下一页数据
      1: 1-20 2:21-40
      this.Params.start+=20;
      this.Params.end+=20;
      2 getList();
      3 数据 应该是 叠加 而不是 直接赋值 
  4 节流阀 
    1 无非就是通过一个变量 来控制是否可以发送请求
    2 如果这一个请求还没有结束 那么就让发送新的请求 
    3 实现
      1 全局变量中 定义 变量  isLoadding=false; => 没有请求
      2 在触发分页请求之前 判断
        1 如果 isLoadding === true => 有请求在发送中 
          不再往下执行发送新请求
        2 如果 isLoadding === false 没有请求 
          1 isLoadding => true  表示 我现在要发送请求了
          2 请求结束的时候 将 isLoadding=> false 

7 先分页->再筛选->再分页
  0 一堆苹果 
    1 分页 显示了第二页的苹果
    2 筛选  只要显示 大于 1斤的苹果
      1 应该 先显示 重量大于 1斤的苹果 
      2 再分页的话  对 重量大于1斤的苹果 继续做分页 
  1 存在问题 
    当执行了筛选之后 要不要继续延续之前的分页页码 参数 

  2 正常的逻辑
    1  当执行筛选之后
      1 重置 页码 页条数 以及 清空旧的数组  


8 重现bug的现象
  1 首次打开房源列表页面的时候  cityName=广州  房子列表=广州
  2 点击了一下 城市选择页面  选择了  北京 
    1 修改redux中的当前城市 => 北京
    2 同时 返回上一页 => 房源列表页面
  3 第二次显示 房源列表页面 cityName= 北京  房子列表 = 广州 
  4 点击了一下 城市选择页面  选择了  上海 
    1 修改redux中的当前城市 => 上海
    2 同时 返回上一页 => 房源列表页面 
  5 第三次显示 房源列表页面  cityName = 上海  房子列表 = 北京 

  6 组件挂载完毕中的cityName  和 城市输入组件中的cityName对应不上
    1 组件挂载完毕事件中 的城市名称不正确  
      会 延迟一次点击 
    2 产出bug的最终的原因
      1 当我们在城市选择页面 修改当前城市的时候
        1  => 异步修改当前城市 需要时间 (比较短 让我们误以为它也是同步)
        2  => 返回上一页 => 重新打开了 房源列表页面 => 组件挂载完毕 重新触发 
      
  7 如何解决 ? 
    1 让修改城市代码执行完毕 了 =>  才触发 组件挂载完毕事件 
    2 回到 城市选择页面
      1 点击 城市名称事件
        0 清空redux中的当前城市 
          1 cityName= undefined
          2 App.js 曾经做过一个判断处理  当 cityName= undefined  这个项目的页面 都没有显示 
        1 异步修改当前城市
          1 会对cityName 重新复有值
        2 返回上一页 => 房源列表页面
      2 房源列表页面 就会被加载 => cityName 等于redux中的cityName 




 */



import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import CityInput from "../../components/CityInput";
import indexCss from "./index.module.scss";
import FilterPanel from "./FilterPanel";
import { connect } from "react-redux";
import axios from "../../utils/request";
import HouseItem from "../../components/HouseItem";
import { List } from "react-virtualized";

console.log("列表找房页面");

class Index extends Component {

  // 请求参数
  Params = {
    // 城市的id
    cityId: -1,
    // 开始的条数
    start: 1,
    // 结束的条数
    end: 20
  }

  //  筛选参数对象
  FilterParams = {}

  // 总条数
  Count = -1;
  // 是否正在发送请求
  IsLoadding = false;
  state = {
    list: []
  }


  async componentDidMount() {
    const { cityName } = this.props;
    console.log(cityName);
    this.Params.cityId = (await axios.get("/area/info?name=" + cityName)).data.body.value;

    this.getList();
  }

  // 获取房源列表
  getList = async () => {
    //  对象合并
    const res = await axios.get("/houses", { params: { ...this.Params, ...this.FilterParams } });
    // 获取到总条数
    this.Count = res.data.body.count;

    this.setState({ list: [...this.state.list, ...res.data.body.list] });

    // 请求回来了 告诉人家 
    this.IsLoadding = false;
  }

  rowRenderer = ({ index, style, key }) => {
    return <div style={style} key={key}  >
      <HouseItem item={this.state.list[index]} />
    </div>
  }

  //  筛选组件点击确定后的 事件
  submitFilter = (filterParams) => {

    // 重置 页码 和 数组 
    this.Params.start = 1;
    this.Params.end = 20;
    this.setState({ list: [] });

    this.FilterParams = filterParams;
    this.getList();
  }

  // List滚动事件
  onScroll = ({ clientHeight, scrollHeight, scrollTop }) => {

    // if (this.state.list.length === 0) {
    //   // 空数组
    //   return

    // }



    /* 
    clientHeight => 滚动区域的高度 
    scrollHeight => 需要滚动的长列表的高度
    scrollTop =>  滚动条距离顶部的 高度 
     */
    // console.clear();
    // console.log("clientHeight",clientHeight);
    // console.log("scrollHeight",scrollHeight);
    // console.log("scrollTop",scrollTop);

    //  判断滚动条是否触底

    // 1 是否滚动到底部了
    // 当我们点击确定按钮的时候  当数组被清空了 list组件没有了高度 
    //  scrollHeight - clientHeight - scrollTop = 0 

    // 还需要针对 空 List组件做一个控制 让 点击筛选按钮的时候 onscrll 不要被触发 


    const isBottom = scrollHeight - clientHeight - scrollTop < 5;
    // 2 是否还有下一页
    const hasMore = this.Params.start < this.Count;
    // 3 是否 空闲
    const isFree = this.IsLoadding === false;
    // 4 解决  当 数组的长度 不为0 的时候 才会可触发onscroll事件
    const hasLength = this.state.list.length > 0;

    if (isBottom && hasMore && isFree&&hasLength) {

      this.IsLoadding = true;
      // 还有下一页数据
      this.Params.start += 20;
      this.Params.end += 20;
      this.getList();
    } else {
      // console.clear();
      // console.log("isBottom", isBottom);
      // console.log("hasMore", hasMore);
      // console.log("isFree", isFree);
      // console.log("不满足加载下一页请求");
    }


  }

  render() {
    return (
      <div className={indexCss.found} >
        {/* 1.0 导航栏 开始 */}
        <div className={indexCss.found_nav}>
          <NavBar style={{ backgroundColor: "#ccc" }} mode="light" icon={<Icon type="left" />} onLeftClick={() => this.props.history.go(-1)} >列表找房</NavBar>
          <div className={indexCss.found_city_input}> <CityInput /> </div>
        </div>
        {/* 1.0 导航栏 结束 */}

        {/* 2.0 筛选面板 开始 */}
        <FilterPanel submitFilter={this.submitFilter} />
        {/* 2.0 筛选面板 结束 */}

        {/* 3.0 房源列表 开始 */}
        <div className={indexCss.found_list}>
          {/* {this.state.list.map((v,i)=><div key={i} > <HouseItem item={v} />  </div>)} */}

          <List
            width={window.screen.width}
            height={window.screen.height - 135}
            rowHeight={120}
            rowCount={this.state.list.length}
            rowRenderer={this.rowRenderer}
            onScroll={this.onScroll}
          />
        </div>
        {/* 3.0 房源列表 结束 */}

      </div>
    );
  }
}


const mapStateToProps = (state) => ({
  cityName: state.mapReducer.city.name
})


export default connect(mapStateToProps)(Index);